<template>
  <div class="app-container">
    <div>
      <el-form ref="form"
               :model="form"
               label-width="80px"
               inline>
        <el-form-item label="账期">
          <el-date-picker value-format="yyyyMM"
                          v-model="form.acctMonth"
                          style="width: 140px"
                          type="month"
                          placeholder="请选择账期"
                          :picker-options="endDateDisabled"></el-date-picker>
        </el-form-item>
        <el-form-item label="区域">
          <el-cascader clearable
                       v-model="form.areaId"
                       :options="options"
                       ref="cascader"
                       :props="props"
                       :show-all-levels="false"
                       @visible-change="getAreaData"></el-cascader>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="handleQuery"
                     style="margin-left: 10px">查询</el-button>
          <el-button type="primary"
                     plain
                     @click="exportExcel">导出Excel</el-button>
          <el-button type="primary"
                     plain
                     @click="exportPpt">导出PPT</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-tabs v-model="activeName" @tab-click="initTable()">
      <el-tab-pane label="台阶收入趋势"
                   name="1">
        <StepsOverall :form="searchData" ref="StepsOverall"></StepsOverall>
      </el-tab-pane>
      <el-tab-pane label="经营单元增长情况"
                   name="2">
        <StepsUnitgrouth :form="searchData" ref="StepsUnitgrouth"></StepsUnitgrouth>
      </el-tab-pane>
      <el-tab-pane label="经营单元的结构细项变化"
                   name="3">
        <StepsManage :form="searchData" ref="StepsManage"></StepsManage>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { downLoadExcelBody, downLoadPptBody } from "@/utils/zipdownload";
import { mapGetters } from "vuex";
import { roleDeptTreeselecttw } from "@/api/workspace/income";
import { stepMaxMonth } from "@/api/barCode/index";
import StepsOverall from "./components/stepsOverall.vue";
import StepsManage from "./components/stepsManage.vue";
import StepsUnitgrouth from "./components/stepsUnitgrouth.vue"
export default {
  name: "barCode",
  components: {
    StepsOverall,
    StepsUnitgrouth,
    StepsManage,
  },
  data () {
    return {
      form: {
        acctMonth: "",
        areaId: "",
      },
      searchData: {
        acctMonth: "",
        areaId: "",
      },
      endDateDisabled: this.pickerDisabled(),
      disabledTime: "",
      options: [],
      props: {
        value: "deptId",
        label: "displayName",
        emitPath: false,
        checkStrictly: true,
        lazy: true,
        lazyLoad (node, resolve) {
          if (node.value) {
            roleDeptTreeselecttw({
              areaId: node.value,
            }).then((res) => {
              if (res.code == 200) {
                if (node.level == 3) {
                  res.depts.forEach((item) => {
                    item.leaf = true;
                  });
                }
                resolve(res.depts);
              }
            });
          }
        },
      },
      activeName: "1",
    };
  },
  computed: {
    ...mapGetters(["deptId", "deptName"]),
  },
  created () { },
  mounted () {
    this.getMaxMonths();
  },
  methods: {
    getAreaData (val) {
      if (val == true) {
        let obj = { deptId: this.deptId, displayName: this.deptName };
        let arr = [];
        arr.push(obj);
        this.options = arr;
      }
    },
    pickerDisabled () {
      let e = this;
      return {
        disabledDate: function (t) {
          if (e.disabledTime) {
            var n = t.getFullYear(),
              a = t.getMonth() + 1;
            if (
              (a >= 1 && a <= 9 && (a = "0" + a),
                n.toString() + a.toString() > e.disabledTime)
            ) {
              return !0;
            }
          }
        },
      };
    },
    getMaxMonths () {
      return new Promise((resolve) => {
        stepMaxMonth().then((res) => {
          resolve(res.msg);
          this.form.acctMonth = res.msg;
          this.disabledTime = res.msg;
          var obj = { deptId: Number(this.deptId), displayName: this.deptName };
          let arr = [];
          arr.push(obj);
          this.options = arr;
          this.form.areaId = Number(this.deptId);
          this.handleQuery()
        });
      });
    },
    exportExcel () {
      let nodesInfo = this.$refs["cascader"].getCheckedNodes();
      let obj = Object.assign({}, this.form);
      let fileName =
        obj.acctMonth + "_" + nodesInfo[0].label + "_" + "台阶收入分析";
      downLoadExcelBody("/StepIncome/export", obj, fileName);
    },
    exportPpt () {
      let nodesInfo = this.$refs["cascader"].getCheckedNodes();
      let obj = Object.assign({}, this.form);
      let fileName =
        obj.acctMonth + "_" + nodesInfo[0].label + "_" + "台阶收入分析";
      downLoadPptBody("/mhIncome/exportPPT", obj, fileName);
    },
    handleQuery () {
      this.searchData.areaId = this.form.areaId
      this.searchData.acctMonth = this.form.acctMonth
      this.initTable();
    },
    initTable () {
      const { activeName } = this;
      if (activeName == 1) {
        this.$refs.StepsOverall.getData();
      } else if (activeName == 2) {
        this.$refs.StepsUnitgrouth.getData();
      } else if (activeName == 3) {
        this.$refs.StepsManage.getData();
      }
    }
  },
};
</script>
